﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝幻灯片上下滑动效果 —— www.zhinengshe.com —— 智能课堂</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script src="../move2.js"></script>
<script>
window.onload=function ()
{
	var oDiv=document.getElementById('play');
	var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');
	var oUl=oDiv.getElementsByTagName('ul')[0];
	
	var now=0;
	
	for(var i=0;i<aBtn.length;i++)
	{
		aBtn[i].index=i;
		aBtn[i].onclick=function ()
		{
			now=this.index;
			
			tab();
		};
	}
	
	function tab()
	{
		for(var i=0;i<aBtn.length;i++)
		{
			aBtn[i].className='';
		}
		aBtn[now].className='active';
		startMove(oUl, {top: -150*now});
	}
	
	function next()
	{
		now++;
		if(now==aBtn.length)
		{
			now=0;
		}
		
		tab();
	}
	
	var timer=setInterval(next, 2000);
	
	oDiv.onmouseover=function ()
	{
		clearInterval(timer);
	};
	
	oDiv.onmouseout=function ()
	{
		timer=setInterval(next, 2000);
	};
};
</script>
</head>

<body>

<div class="play" id="play">
    <ol>
    	<li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
	<ul>
		<li><a href="http://www.zhinengshe.com/"><img src="images/1.jpg" alt="广告一" /></a></li>
		<li><a href="http://www.zhinengshe.com/"><img src="images/2.jpg" alt="广告二" /></a></li>
		<li><a href="http://www.zhinengshe.com/"><img src="images/3.jpg" alt="广告三" /></a></li>
		<li><a href="http://www.zhinengshe.com/"><img src="images/4.jpg" alt="广告四" /></a></li>
		<li><a href="http://www.zhinengshe.com/"><img src="images/5.jpg" alt="广告五" /></a></li>
	</ul>
</div>
</body>
</html>
